<template>
    <div class="login-container">
        <div class="logo"/>
        <div class="form">
            <h1>登录</h1>
            <el-card shadow="never" class="login-card">
                <el-form ref="form" :model="form" :rules="rules">
                    <el-form-item prop="mobile">
                        <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="isAgree">
                        <el-checkbox v-model="form.isAgree">用户平台使用协议</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm()">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Login',
    data () {
        return {
            form: {
                mobile: process.env.VUE_APP_DEFAULT_MOBILE || '',
                password: process.env.VUE_APP_DEFAULT_PASSWORD || '',
                isAgree: false
            },

            rules: {
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    // { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 16, message: '密码必须为 6 ~ 16位', trigger: 'blur' },
                ],
                isAgree: [
                    { validator: (rule, value, callback) => value ? callback() : callback(new Error('请勾选用户协议')),trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        submitForm () {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    const res = await this.$store.dispatch('user/login', this.form)
                    if (res) this.$router.push('/dashboard')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-button--primary {
    width: 350px;
}

.login-container {
    display: flex;
    align-items: stretch;
    height: 100vh;

    .logo {
        flex: 3;
        background: rgba(38, 72, 176) url(../../assets/common/login_back.png) no-repeat center / cover;
        border-top-right-radius: 60px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        padding: 0 100px;

        .icon {
            background: url(../../assets/common/logo.png) no-repeat 70px center /
        contain;
            width: 300px;
            height: 50px;
            margin-bottom: 50px;
        }

        p {
            color: #FFFFFF;
            font-size: 18px;
            margin-top: 20px;
            width: 300px;
            text-align: center;
        }
    }

    .form {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 176px;

        .el-card {
            border: none;
            padding: 0;
        }

        h1 {
            padding-left: 20px;
            font-size: 24px;
        }

        .el-input {
            width: 350px;
            height: 44px;

            .el-input__inner {
                background: #F4F5FB;
            }
        }

        .el-checkbox {
            color: #606266;
        }
    }
}
</style>
